:root {
  --lexical-ordered-list-left-margin: 16px;

  --checkbox-size: 18px;
  @media screen and (max-width: 450px) {
    --checkbox-size: 26px;
  }
}
.monospace-font {
  --lexical-ordered-list-left-margin: 42px;
}
@for $i from 1 through 5 {
  .Lexical__ol#{$i} {
    padding: 0;
    margin: 0;
    margin-left: var(--lexical-ordered-list-left-margin);
    list-style-position: outside;

    &.Lexical__rtl {
      margin-left: 0;
      margin-right: var(--lexical-ordered-list-left-margin);
    }
  }
}
.Lexical__ol2 {
  list-style-type: upper-alpha;
}
.Lexical__ol3 {
  list-style-type: lower-alpha;
}
.Lexical__ol4 {
  list-style-type: upper-roman;
}
.Lexical__ol5 {
  list-style-type: lower-roman;
}
.Lexical__ul {
  padding: 0;
  margin: 0;
  margin-left: 16px;
  list-style-position: outside;

  &.Lexical__rtl {
    margin-left: 0;
    margin-right: 16px;
  }
}
.Lexical__checkList {
  margin-left: 0;
  .Lexical__nestedListItem & {
    margin-left: 16px;
  }
}
.Lexical__listItem {
  margin: 0 0px;
}
.Lexical__listItemChecked,
.Lexical__listItemUnchecked {
  position: relative;
  padding-left: calc(var(--checkbox-size) + 0.5rem);
  padding-right: calc(var(--checkbox-size) + 0.5rem);
  list-style-type: none;
  outline: none;
  vertical-align: middle;
  --line-height: calc(var(--checkbox-size) + 0.375rem);
  line-height: var(--line-height);

  @media screen and (max-width: 450px) {
    &:not(:last-child) {
      margin-bottom: 0.15rem;
    }
  }

  &:focus,
  &:focus-within {
    outline: none;
    box-shadow: none;
  }
}
.Lexical__listItemChecked {
  text-decoration: line-through;
  opacity: 0.4;
}
.Lexical__listItemUnchecked:before,
.Lexical__listItemChecked:before {
  /* checkbox */
  content: '';
  width: var(--checkbox-size);
  height: var(--checkbox-size);
  left: 0;
  top: calc(var(--line-height) / 2);
  transform: translateY(-50%);
  cursor: pointer;
  background-size: cover;
  position: absolute;
}
.Lexical__listItemUnchecked[dir='rtl']:before,
.Lexical__listItemChecked[dir='rtl']:before {
  left: auto;
  right: 0;
}
.Lexical__listItemUnchecked:before {
  border: 1px solid #999;
  border-radius: 2px;
}
.Lexical__listItemChecked:before {
  border: 1px solid var(--sn-stylekit-info-color);
  border-radius: 2px;
  background-color: var(--sn-stylekit-info-color);
  background-repeat: no-repeat;
}
.Lexical__listItemChecked:after {
  /* checkmark */
  content: '';
  cursor: pointer;
  background-image: url('data:image/svg+xml,%3Csvg%20viewBox%3D%220%200%2020%2020%22%20fill%3D%22white%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M17.5001%205.83345L7.50008%2015.8334L2.91675%2011.2501L4.09175%2010.0751L7.50008%2013.4751L16.3251%204.65845L17.5001%205.83345Z%22%2F%3E%3C%2Fsvg%3E%0A');
  background-repeat: no-repeat;
  position: absolute;
  left: 0;
  --top: calc(var(--line-height) / 2);
  top: var(--top);
  transform: translateY(-50%);
  display: block;
  width: var(--checkbox-size);
  height: var(--checkbox-size);
}
.Lexical__nestedListItem {
  list-style-type: none;
  &.Lexical__listItemUnchecked {
    padding-left: 0;
  }
}
.Lexical__nestedListItem:before,
.Lexical__nestedListItem:after {
  display: none;
}
